<script setup lang='ts'>
import fx11 from '@/assets/cooperation/fx11.png?url'
import fx12 from '@/assets/cooperation/fx12.png?url'
import fx13 from '@/assets/cooperation/fx13.png?url'
import fx14 from '@/assets/cooperation/fx14.png?url'
import sx11 from '@/assets/cooperation/sx11.png?url'
import sx12 from '@/assets/cooperation/sx12.png?url'
import sx13 from '@/assets/cooperation/sx13.png?url'
import { useRouter } from 'vue-router'
import RegisterEntryPoint from './compoments/register-entry-point.vue'
import Footer from '@/layout/components/lay-footer/index.vue'
defineOptions({
  name: 'cooperation-register'
})
const router = useRouter()
type ListInfo = {
  img: string,
  flag?: string,
  tip: string
}
const firstLine: ListInfo[] = [
  {
    img: fx11,
    flag: '玩家拉新',
    tip: '邀请新玩家，获得赛季卡收益',
  },
  {
    img: fx12,
    flag: '赛季卡推广',
    tip: '成功推广赛季卡可获得高额收益',
  },
  {
    img: fx13,
    flag: '峡谷赛事',
    tip: '战场龙灵技刷新，主播和玩家可获得收益',
  },
  {
    img: fx14,
    flag: '礼物推广',
    tip: '游戏中收到礼物打赏可获得收益',
  },
]
const secondLine: ListInfo[] = [
  {
    img: sx11,
    tip: '分成高比例 充分尊重价值',
  },
  {
    img: sx12,
    tip: '结算零帐期 随时自主结算',
  },
  {
    img: sx13,
    tip: '效果数据详尽 助力能力提升',
  },

]
function jump(routerId: string, registryType?: string) {
  router.push({ name: routerId, params: { registryType } })
}
</script>

<template>
  <div class="p-1 bg-slate-100 dark:bg-slate-700">
    <div class="2xl:w-2/3 mx-auto mb-12 p-2 pb-4 shadow-sm bg-slate-50 dark:bg-slate-600">
      <!-- 第一栏 -->
      <div class="bg-sky-200 py-8 px-16">
        <h4 class="text-center mb-12 text-neutral-600 text-lg">合作模式</h4>
        <div class="flex justify-between gap-12 2xl:flex-nowrap xl:flex-nowrap lg:flex-wrap md:flex-wrap sm:flex-wrap">
          <div class="flex flex-col items-center bg-white basis-72 grow p-2 rounded" v-for="item of firstLine">
            <img class="size-56" :src="item.img" :alt="item.flag" srcset="">
            <span class="text-neutral-600 text-xl">{{ item.flag }}</span>
            <span class="text-neutral-400 text-sm text-center px-4 mt-2">{{ item.tip }}</span>
          </div>
        </div>
      </div>
      <!-- 第二栏 -->
      <div class="bg-white py-8 mt-4 px-16">
        <h4 class="text-center mb-8 text-neutral-600 text-lg">合作优势</h4>
        <div class="flex justify-center gap-24 2xl:flex-nowrap xl:flex-nowrap lg:flex-wrap md:flex-wrap sm:flex-wrap">
          <div class="flex flex-col items-center  basis-72  p-2 rounded" v-for="item of secondLine">
            <img class="size-56" :src="item.img" :alt="item.flag" srcset="">
            <span class="text-neutral-600">{{ item.flag }}</span>
            <span class="text-neutral-400 mt-4 text-sm text-center">{{ item.tip }}</span>
          </div>
        </div>
      </div>
      <ElSpace class="mt-4 w-full" fill :fill-ratio="18" size="large">
        <RegisterEntryPoint @click="jump('cooperation-anchor')" title="我是主播"></RegisterEntryPoint>
        <RegisterEntryPoint @click="jump('cooperation-anchor', 'commentary')" title="我是解说"></RegisterEntryPoint>
        <RegisterEntryPoint @click="jump('cooperation-org')" title="我是MCN机构"></RegisterEntryPoint>
        <RegisterEntryPoint @click="jump('cooperation-org', 'game-guild')" title="我是游戏公会"></RegisterEntryPoint>
        <!-- @click="jump('cooperation-agent', 'agent')"  -->
        <RegisterEntryPoint title="我是经纪人" action-text="敬请期待..."></RegisterEntryPoint>
      </ElSpace>

    </div>


    <Footer />
  </div>

</template>

<style lang='scss' scoped></style>
